// pages/route-detail/route-detail.js
Page({
  data: {
    navHeight: 132, // 导航栏高度
    routeDetail: {}, // 路线详细信息
    routeImages: [], // 路线相关图片
    currentImageIndex: 0, // 当前图片索引
    isCollected: false, // 是否已收藏
    heroAnimation: null, // 英雄图片动画
    
    // 触摸相关
    touchStartY: 0,
    touchStartTime: 0,
    
    // 内容区域展开状态
    isExpanded: false
  },

  onLoad(options) {
    console.log('路线详情页面参数:', options);
    
    // 获取路线ID
    const routeId = parseInt(options.id) || 1;
    
    // 从缓存获取路线详情数据
    let routeDetail = wx.getStorageSync('routeDetail');
    
    // 如果缓存中没有数据，使用默认数据
    if (!routeDetail || routeDetail.id !== routeId) {
      routeDetail = this.getDefaultRouteData(routeId);
    }
    
    // 设置路线图片
    const routeImages = this.generateRouteImages(routeDetail);
    
    // 检查收藏状态
    const isCollected = this.checkCollectionStatus(routeId);
    
    this.setData({
      routeDetail,
      routeImages,
      isCollected
    });
    
    // 初始化英雄图片动画
    this.initHeroAnimation();
  },

  // 获取默认路线数据
  getDefaultRouteData(routeId) {
    const defaultRoutes = {
      1: {
        id: 1,
        title: '黑麋峰观景环线',
        description: '轻松游览主要观景点，适合全家出行，沿途风景优美，可欣赏山峰全貌',
        coverImage: '/images/景点-1.jpg',
        difficulty: 'easy',
        difficultyText: '休闲',
        duration: '2-3小时',
        spotsCount: 4,
        rating: 4.8,
        tags: ['观景', '拍照', '全家游'],
        spots: [
          { name: '黑麋峰观景台', duration: '45分钟' },
          { name: '观景亭', duration: '30分钟' },
          { name: '森林步道', duration: '60分钟' },
          { name: '游客中心', duration: '30分钟' }
        ]
      },
      2: {
        id: 2,
        title: '瀑布探秘之旅',
        description: '深入山谷探寻隐秘瀑布群，体验自然生态之美，适合喜欢亲水的游客',
        coverImage: '/images/景点-3.jpg',
        difficulty: 'medium',
        difficultyText: '中等',
        duration: '3-4小时',
        spotsCount: 5,
        rating: 4.9,
        tags: ['瀑布', '生态', '徒步'],
        spots: [
          { name: '瀑布群', duration: '90分钟' },
          { name: '森林步道', duration: '60分钟' },
          { name: '观景台', duration: '45分钟' },
          { name: '休息区', duration: '30分钟' },
          { name: '返程', duration: '45分钟' }
        ]
      }
    };
    
    return defaultRoutes[routeId] || defaultRoutes[1];
  },

  // 生成路线相关图片
  generateRouteImages(routeDetail) {
    const baseImages = [
      routeDetail.coverImage,
      '/images/景点-2.jpg',
      '/images/攻略照片1.jpg',
      '/images/攻略照片2.jpg',
      '/images/景点-4.jpg'
    ];
    
    // 根据路线类型返回不同的图片组合
    switch (routeDetail.difficulty) {
      case 'easy':
        return [baseImages[0], baseImages[1], baseImages[4]];
      case 'medium':
        return [baseImages[0], baseImages[2], baseImages[3]];
      case 'hard':
        return [baseImages[0], baseImages[1], baseImages[2], baseImages[4]];
      case 'expert':
        return baseImages;
      default:
        return [baseImages[0], baseImages[1], baseImages[2]];
    }
  },

  // 检查收藏状态
  checkCollectionStatus(routeId) {
    const collections = wx.getStorageSync('routeCollections') || [];
    return collections.includes(routeId);
  },

  // 初始化英雄图片动画
  initHeroAnimation() {
    const animation = wx.createAnimation({
      duration: 800,
      timingFunction: 'ease-out'
    });
    
    animation.scale(1.05).step();
    
    this.setData({
      heroAnimation: animation.export()
    });
    
    // 重置动画
    setTimeout(() => {
      animation.scale(1).step();
      this.setData({
        heroAnimation: animation.export()
      });
    }, 800);
  },

  // 轮播图切换事件
  onSwiperChange(e) {
    const current = e.detail.current;
    this.setData({
      currentImageIndex: current
    });
  },

  // 触摸开始事件
  onTouchStart(e) {
    this.setData({
      touchStartY: e.touches[0].clientY,
      touchStartTime: Date.now()
    });
  },

  // 触摸结束事件
  onTouchEnd(e) {
    const touchEndY = e.changedTouches[0].clientY;
    const touchEndTime = Date.now();
    const deltaY = touchEndY - this.data.touchStartY;
    const deltaTime = touchEndTime - this.data.touchStartTime;
    
    // 检测快速向下滑动手势
    if (deltaY > 100 && deltaTime < 300) {
      this.onNavBackTap();
    }
  },

  // 内容区域点击事件 - 展开
  onContentSectionTap(e) {
    // 阻止事件冒泡
    // e.stopPropagation();
    
    this.setData({
      isExpanded: !this.data.isExpanded
    });
    console.log('内容区域状态:', this.data.isExpanded ? '已展开' : '已收起');
    
    // 触觉反馈
    wx.vibrateShort({
      type: 'light'
    });
  },

  // 英雄区域点击事件 - 收起
  onHeroSectionTap(e) {
    // 阻止事件冒泡
    e.stopPropagation();
    
    if (this.data.isExpanded) {
      this.setData({
        isExpanded: false
      });
      console.log('内容区域已收起');
      
      // 触觉反馈
      wx.vibrateShort({
        type: 'light'
      });
    }
  },

  // 操作按钮区域点击事件 - 阻止冒泡
  onActionButtonsAreaTap(e) {
    // 阻止事件冒泡到content-section
    e.stopPropagation();
  },

  // 收藏按钮点击事件
  onCollectTap() {
    const { routeDetail, isCollected } = this.data;
    const collections = wx.getStorageSync('routeCollections') || [];
    
    if (isCollected) {
      // 取消收藏
      const index = collections.indexOf(routeDetail.id);
      if (index > -1) {
        collections.splice(index, 1);
      }
      wx.showToast({
        title: '已取消收藏',
        icon: 'success',
        duration: 1500
      });
    } else {
      // 添加收藏
      collections.push(routeDetail.id);
      wx.showToast({
        title: '收藏成功',
        icon: 'success',
        duration: 1500
      });
    }
    
    // 更新缓存和状态
    wx.setStorageSync('routeCollections', collections);
    this.setData({
      isCollected: !isCollected
    });
  },

  // 开始导航按钮点击事件
  onStartTap() {
    const { routeDetail } = this.data;
    
    wx.showModal({
      title: '开始导航',
      content: `即将为您导航到"${routeDetail.title}"的起点，请确保已做好出行准备。`,
      confirmText: '开始导航',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          // 这里可以集成真实的导航功能
          wx.showToast({
            title: '导航已启动',
            icon: 'success',
            duration: 2000
          });
          
          // 模拟导航跳转（实际项目中可以跳转到地图页面）
          setTimeout(() => {
            wx.navigateTo({
              url: '/pages/routes/routes',
              fail: () => {
                console.log('导航页面不存在，使用当前页面模拟');
              }
            });
          }, 2000);
        }
      }
    });
  },



  // 导航栏返回事件
  onNavBackTap() {
    // 添加页面退出动画
    const animation = wx.createAnimation({
      duration: 300,
      timingFunction: 'ease-in'
    });
    
    animation.translateY(100).opacity(0).step();
    
    this.setData({
      heroAnimation: animation.export()
    });
    
    // 延迟返回以完成动画
    setTimeout(() => {
      wx.navigateBack({
        fail: () => {
          // 如果没有上一页，则返回首页
          wx.reLaunch({
            url: '/pages/index/index'
          });
        }
      });
    }, 250);
  },

  // 导航栏高度变化事件
  onNavHeightChange(e) {
    const { totalHeight } = e.detail;
    this.setData({
      navHeight: totalHeight
    });
  },

  // 页面分享
  onShareAppMessage() {
    const { routeDetail } = this.data;
    return {
      title: `${routeDetail.title} - 黑麋峰精品线路`,
      path: `/pages/route-detail/route-detail?id=${routeDetail.id}`,
      imageUrl: routeDetail.coverImage
    };
  },

  // 分享到朋友圈
  onShareTimeline() {
    const { routeDetail } = this.data;
    return {
      title: `${routeDetail.title} - 黑麋峰精品线路推荐`,
      imageUrl: routeDetail.coverImage
    };
  },

  // 页面显示时
  onShow() {
    // 重新检查收藏状态（防止从其他页面返回时状态不一致）
    const isCollected = this.checkCollectionStatus(this.data.routeDetail.id);
    this.setData({ isCollected });
  },

  // 页面卸载时
  onUnload() {
    // 清理动画
    if (this.data.heroAnimation) {
      this.setData({
        heroAnimation: null
      });
    }
  }
});
